<!-- <template>
  <div id="app">
    <h1 v-html="msg"></h1>
    <input type="text" v-model="itemNew" v-on:keyup.enter="addNew()"/><!--监听键盘回车事件-->
   /*<!-- <ul>
      <li v-for="item in items" v-bind:class="{isStudent:item.student}" >
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
//使用ES6特性引入 localstorage 储存脚本，命名为 Storage
import Storage from './localstorage'

//ES6语法，相当于
//new Vue({})
export default {
  name: 'app',
  data(){
    return {

      msg:'Type name and mark who is student',
      items:Storage.fetch(),//获取存在 storage 里面的键值对
      itemNew:''

    }
  },

methods:{
  addNew:function(){
    this.items.push({
      name:this.itemNew,
      student:true
    })
    this.itemNew = null;
  },

   //turnRed:function(item){
   //   item.student=!item.student;
  // }
 //},
 //v-on:click="turnRed(item)"

 }
}
</script>

<style>
 .isStudent{
    color: red !important;
}
  #app{

    text-align:center;
  }
</style> --> */
 -->
<!DOCTYPE html>
<head>
  <!-- <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
  <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> -->
</head>

<template>

 <div class="app-container">
  <!-- 顶部header区 -->
  <Header fixed>我是表头</Header>

  <!-- 路由 -->
  <transition mode="out-in">
    <router-view></router-view>
  </transition>


  <!-- 底部bottom区 -->
  <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home" relace to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="user-circle-o" relace to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart" info="0" relace to="/shopping">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" dot relace to="/search">搜索</van-tabbar-item>
  </van-tabbar>
  <!-- <span class="glyphicon glyphicon-search"></span> -->

 </div>
</template>
<style lang="scss" scoped>
  *{
    padding: 0;
    margin: 0;
  }
  .app-container{
     overflow-x: hidden;//横向超出设备宽度隐藏
  }
  .v-enter{
    opacity: 0;
    transform: translateX(100%);
  }
   .v-leave-to{
     opacity: 0;
     transform: translateX(-100%);
  }
  .v-enter-active,
  .v-leave-active{
    transition: all 0.3s ease-out;
  }

</style>
<script>
  import Header from './components/Header.vue'
  import HomeContainer from './components/tabbar/HomeContainer.vue'

  export default{
    name:'app',
      data() {
        return {
          active: 0
        }
    },
    components:{
        Header,
    }
  }
</script>
